<template>
	<view class="content">
		<view class="one-card">
			<view class="logo">
				<image src="../../../static/image/bank-logo.png" mode=""></image>
			</view>
			<image class="bg-card" src="../../../static/image/card-bg.png" mode=""></image>
			<view class="card-infor">
				<view>中國銀行 儲蓄卡</view>
				<view style="margin-top:24rpx;">**** **** **** 8880</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// url:`https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`
			};
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#FAFAFA;
		.content{
			width:702rpx;margin-left:auto;
			margin-right:auto;
			padding-top:2rpx;
		}
	}
	.one-card{
		width:702rpx;height:260rpx;margin-top:24rpx;
		background:  linear-gradient(180deg, #D65667 0%, #9E2031 100%);
		border-radius: 15px;overflow: hidden;position: relative;
		box-sizing: border-box;padding:24rpx;
		.logo{
			width:70rpx;height:70rpx;background-color: #ffffff;
			display: flex;align-items: center;justify-content: center;
			border-radius: 50%;
			image{
				width:48rpx;height:48rpx;
			}
		}
		.bg-card{
			width:260rpx;height:260rpx;opacity: 0.2;position: absolute;
			bottom:0;right:40rpx;margin-bottom:-95rpx;
		}
		.card-infor{
			position: absolute;top:78rpx;left:130rpx;
			font-size:36rpx;line-height:50rpx;
			color:#fff;
		}
	}
</style>
